<template>
  <div id="app-container">
    <!-- 输入表单 -->
    <el-form label-width="120px">
      <el-form-item label="讲师名称">
        <el-input v-model="teacher.name" />
      </el-form-item>
      <el-form-item label="入驻时间">
        <el-date-picker v-model="teacher.joinDate" value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item label="讲师排序">
        <el-input-number v-model="teacher.sort" :min="0" />
      </el-form-item>
      <el-form-item label="讲师头衔">
        <el-select v-model="teacher.level">
          <!--
            数据类型一定要和取出的json中的一致，否则没法回填
            因此，这里value使用动态绑定的值，保证其数据类型是number
            -->
          <el-option :value="1" label="高级讲师" />
          <el-option :value="2" label="首席讲师" />
        </el-select>
      </el-form-item>
      <el-form-item label="讲师简介">
        <el-input v-model="teacher.intro" />
      </el-form-item>
      <el-form-item label="讲师资历">
        <el-input v-model="teacher.career" :rows="10" type="textarea" />
      </el-form-item>
      <!-- 讲师头像：TODO -->
      <el-form-item label="讲师头像">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8120/admin/oss/file/upload?module=avatar"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :on-success="handleAvatarSuccess"
          :on-error="handleAvatarError"
        >
          <img v-if="teacher.avatar" :src="teacher.avatar" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <!-- 提交之后设置禁用, 防止误操作连续双机,同一个讲师保存多次-->
      <el-form-item>
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          @click="saveOrUpdate()"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import teacherApi from "@/api/teacher.js";
export default {
  data() {
    return {
      teacher: {},
      saveBtnDisabled: false, //表示是否禁用
    };
  },
  methods: {
    //更新讲师
    update() {
      teacherApi.teacherUpdate(this.teacher).then((response) => {
        this.$message.success(response.message);
        //路由到讲师列表页面
        this.$router.push("/teacher");
      });
    },
    //新增讲师
    save() {
      teacherApi.teacherSave(this.teacher).then((response) => {
        this.$message.success(response.message);
        //路由到讲师列表页面
        //$router代表整个vue所有的路由的集合配置对象,对应router目录
        //$route,代表当前form.vue对应的路由对象
        //push中推入路由中已存在的地址,vue会自动路由到对应的页面显示
        this.$router.push("/teacher");
      });
    },
    saveOrUpdate() {
      //禁用提交按钮
      this.saveBtnDisabled = true;
      if (this.teacher.id) {
        //更新
        this.update();
      } else {
        //新增
        this.save();
      }
    },
    //获取id对应的讲师信息回显
    getTeacher() {
      //$router 所有的route对象
      //$route 代表当前页面的路由信息
      //console.log("获取到的id: "+this.$route.params.id)
      teacherApi.teacherQueryById(this.$route.params.id).then((response) => {
        this.teacher = response.data.item;
      });
    },
    //头像上传成功的回调函数
    handleAvatarSuccess(response, file) {
      if (response.code === 20000) {
        //console.log(response);
        this.teacher.avatar = response.data.path;
        //强制渲染
        this.$forceUpdate();
      } else {
        //有异常
        this.$message.error('上传失败');
      }
    },
    //头像上传之后的校验
    beforeAvatarUpload(file) {
      //格式是否为jpg
      const isJPG = file.type === "image/jpeg";
      //是否小于2M 字节/1024--k  /1024--M
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //网络异常
    handleAvatarError(){
      this.$message.error('上传失败(服务器繁忙)')
    }
  },
  created() {
    //表单回显
    //只有更新跳转到此组件时,才需要执行查询方法
    if (this.$route.params.id) {
      this.getTeacher();
    }
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>